<style>
</style>
<template>
    <ly-page>
        <ly-navi type="title" title="高级Table"></ly-navi>

        <ly-page-content>
            <el-form :inline="true" size="small">
                <el-form-item label="分割">
                    <el-switch v-model="show.split"></el-switch>
                </el-form-item>
                <el-form-item label="显示头部">
                    <el-switch v-model="show.header"></el-switch>
                </el-form-item>
                <el-form-item label="显示底部">
                    <el-switch v-model="show.footer"></el-switch>
                </el-form-item>
                <el-form-item label="显示栏目 1">
                    <el-switch v-model="show.column1"></el-switch>
                </el-form-item>
                <el-form-item label="显示栏目 2">
                    <el-switch v-model="show.column2"></el-switch>
                </el-form-item>
                <el-form-item label="显示栏目 3">
                    <el-switch v-model="show.column3"></el-switch>
                </el-form-item>
                <el-form-item label="显示操作">
                    <el-switch v-model="show.column4"></el-switch>
                </el-form-item>
            </el-form>


            <ly-table :data="store.data" v-loading="store.loading" :split="show.split">
                <ly-table-header v-if="show.header">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.__checked" @change="store.onItemCheckChange()"></el-checkbox>
                        <div>
                            <ly-info style="font-weight: bold" label="协议编号">10000000</ly-info>
                            <div>
                                <ly-info label="添加时间">2019-11-09</ly-info>
                                <ly-info label="到期时间">2019-11-09</ly-info>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary" size="mini">详情</el-button>
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="primary" size="mini">删除</el-button>
                        </div>
                    </template>
                </ly-table-header>

                <ly-table-column label="栏目1" align="center" v-if="show.column1">
                    <span>
                        bbb
                    </span>
                </ly-table-column>
                <ly-table-column :width="500" name="items">
                    <ly-table-column label='栏目2' v-if="show.column2">
                        <template slot-scope="scope">
                            <ly-info label="添加时间">{{scope.item.source_name}}</ly-info>
                        </template>
                    </ly-table-column>
                    <ly-table-column label='栏目3' :width="200" v-if="show.column3">
                        <template slot-scope="scope">
                            <ly-info label="活跃时间">{{scope.item.phone}}</ly-info>
                        </template>
                    </ly-table-column>
                </ly-table-column>
                <ly-table-column label="操作" width="200" v-if="show.column4">
                    <ly-button-group>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>

                    </ly-button-group>
                </ly-table-column>
                <ly-table-footer v-if="show.footer">
                    <div>
                        <ly-info style="font-weight: bold" label="协议编号">10000000</ly-info>
                        <div>
                            <ly-info label="添加时间">2019-11-09</ly-info>
                            <ly-info label="到期时间">2019-11-09</ly-info>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary" size="mini">详情</el-button>
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini">删除</el-button>
                    </div>
                </ly-table-footer>

            </ly-table>
            <ly-pagination check-all :store="store">
                <el-button type="primary" size="small">批量删除</el-button>
                <el-button type="primary" size="small">批量更新</el-button>
            </ly-pagination>
            <ly-code-view>
        <pre v-pre>

<ly-table :data="store.data" v-loading="store.loading" :split="show.split">
    <ly-table-header v-if="show.header">
        <div>
            <ly-info style="font-weight: bold" label="协议编号">10000000</ly-info>
            <div>
                <ly-info label="添加时间">2019-11-09</ly-info>
                <ly-info label="到期时间">2019-11-09</ly-info>
            </div>
        </div>
        <div>
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="primary" size="mini">删除</el-button>
        </div>
    </ly-table-header>

    <ly-table-column label="栏目1" align="center" v-if="show.column1">
        <span>
            bbb
        </span>
    </ly-table-column>
    <ly-table-column :width="500" name="items">
        <ly-table-column label='栏目2' v-if="show.column2">
            <templ slot-scope="scope">
                <ly-info label="添加时间">{{scope.item.source_name}}</ly-info>
            </templ>
        </ly-table-column>
        <ly-table-column label='栏目3' :width="200" v-if="show.column3">
            <templ slot-scope="scope">
                <ly-info label="活跃时间">{{scope.item.phone}}</ly-info>
            </templ>
        </ly-table-column>
    </ly-table-column>
    <ly-table-column label="操作" width="200" v-if="show.column4">
        <ly-button-group>
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="primary" size="mini">编辑</el-button>

        </ly-button-group>
    </ly-table-column>
    <ly-table-footer v-if="show.footer">
        <div>
            <ly-info style="font-weight: bold" label="协议编号">10000000</ly-info>
            <div>
                <ly-info label="添加时间">2019-11-09</ly-info>
                <ly-info label="到期时间">2019-11-09</ly-info>
            </div>
        </div>
        <div>
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="primary" size="mini">删除</el-button>
        </div>
    </ly-table-footer>

</ly-table>


        </pre>
            </ly-code-view>
            <ly-markdown>
              <pre v-pre>
## `ly-table`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  data | 数据	  |Array |—	|—	|
|  split | 分割型table	  |boolean |—	|false	|

## `ly-table-column`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  label | 表头名称	  |Array |—	|—	|
|  align | 对齐方式	  |string |left,center,right	|left	|
|  width | 宽度 不带 px	  |int |—	|-	|
|  flex | 比例	  |int |—	|1	|
|  name | 关联的键名	  | |—	|-	|

#### ly-table-column Slot

| 名称  |说明   |scope   |
| ------------ |------------ | ------------ |
|  default | 内容区域|column,row,index,如果是嵌套列表的有 item|


## `ly-table-header`,'ly-table-footer'
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |

#### ly-table-header,ly-table-footer  Slot

| 名称  |说明   |scope   |
| ------------ |------------ | ------------ |
|  default | 内容区域|column,row,index|
              </pre>
            </ly-markdown>


        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", ['/table/mock.js'], function (mock) {
        return {
            data: function () {
                var store = Ly.dataStore({
                    url: '/',
                    data: function () {
                        var list = mock.mockList("id,name,create_time:date,status_show:marketing_clue_status,source_name:marketing_source", 5);

                        for (var i = 0; i < list.length; i++) {
                            list[i].items = mock.mockList("id,source_name:marketing_source,phone", 3)
                        }
                        return list;
                    }
                });
                store.load(1);
                return {
                    show: {
                        split: true,
                        header: true,
                        column1: true,
                        column2: true,
                        column3: true,
                        column4: true,
                        footer: false
                    },
                    store: store
                }
            },
            mounted: function () {

            },
            methods: {}
        }
    })
</script>